<template>
	<view>
		<!-- <view class="title">累计可上传5张照片(长按图片可删除)</view> -->
		<view class="box">
			<view class="camera">
				<view class="camera-box" @tap="doJudge">
					<image src="../../static/images/my/camera.png" mode=""></image>
					<text>上传照片</text>
				</view>
			</view>
			<view class="items" v-for="(item,index) in list" :key="index">
				<image :src="item.url" mode="" @tap="showImgs(index)" @longpress="longClick(index)"></image>
				<view :class="{'del-active':delShow}" class="del" @tap="del(item,index)" v-if="delShow">×</view>
				<view class="review" v-if="item.status==6">
					<image src="/static/images/my/shz.png" mode=""></image>
				</view>
				<view class="review" v-if="item.status==2">
					<image src="/static/images/my/shzf.png" mode=""></image>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapState(['token'])
		},
		data() {
			return {
				info: {},
				list: [],
				imgsList: [],
				delShow: false,
				tips: false,
				num: 1,
				count: null,
				u: {},
			};
		},
		//下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新');
			setTimeout(() => {
				this.list = [];
				this.imgsList = [];
				this.getData();
				uni.stopPullDownRefresh();
			}, 1000)
		},
		onLoad() {
			let uJson = uni.getStorageSync('userinfo')
			if (uJson) {
				this.u = JSON.parse(uJson)
			}
			if (this.u.id <= 0) {
				uni.navigateTo({
					url: "/pages/index/wxLogin"
				})
				return
			}
			this.getData();
		},
		onShow() {
			if (this.u.id <= 0) {
				uni.navigateTo({
					url: "/pages/index/wxLogin"
				})
				return
			}
		},
		methods: {
			//获取数据
			async getData() {
				try {
					let params = {
						token: this.token,
						id: this.u.id
					};
					let res = await this.$request.request.get('/api/user/image', params)
					console.log(res);
					if (res.code == 200) {
						this.list = res.data.data;
						this.count = res.data.data.length;
						//处理预览图片
						for (let i in this.list) {
							if (this.list[i].url) {
								this.imgsList.push(this.list[i].url)
							}
						}
						//判断是否有审核失败图片
						this.getTips();
						this.num++;

					}
				} catch (err) {
					this.$request.error(err, this)
				}
			},
			//提醒
			getTips() {
				for (let i in this.list) {
					if (this.list[i].status == 2) {
						this.tips = true;
					}
				}

				//只会提醒一次
				if (this.tips && this.num == 1) {
					uni.showModal({
						title: '温馨提醒',
						content: '您有照片未通过审核,建议删除后重新上传!',
						showCancel: false,
						confirmText: '我知道了',
						success: (res) => {
							console.log(res);
						}
					});
				}
			},
			//上传前判断
			doJudge() {
				this.doUp();
				return
				//先判断图片是否有5张
				if (this.list.length < 5) {
					uni.showModal({
						title: '温馨提醒',
						content: '上传照片需要审核，您还能提交' + this.count + '次照片审核请求',
						showCancel: false,
						confirmText: '我知道了',
						success: (res) => {
							console.log(res);
							this.doUp();
						}
					});
				} else {
					uni.showModal({
						title: '对不起!',
						content: '每位用户最多只能展示5张照片',
						showCancel: false,
						confirmText: '我知道了',
						success: (res) => {
							console.log(res);
						}
					});
				}
			},
			//选择图片
			doUp() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						console.log(JSON.stringify(res.tempFilePaths));
						// console.log(JSON.stringify(chooseImageRes.tempFilePaths));
						uni.uploadFile({
							url: this.$config.API + '/api/common/image?token=' + this.token,
							header: {
								'token': this.token
							},
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								let res = JSON.parse(uploadFileRes.data);
								console.log(5555555, res);
								if (res.code == 200) {
									uni.showToast({
										title: res.msg,
										icon: "none",
										mask: true
									});
									this.list = [];
									this.imgsList = [];
									//重新获取数据
									this.getData();
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none",
										mask: true
									});
								}
							}
						});
					}
				});
			},
			//点击了删除
			del(e, i) {
				// console.log(e);
				this.list.splice(i, 1);
				//执行删除
				this.delImg(e);
			},
			async delImg(e) {

				try {
					let params = {
						token: this.token,
						id: this.u.id,
						imageId: e.id
					};
					let res = await this.$request.request.post('/api/user/del_image', params)
					if (res.code == 200) {
						this.list = [];
						this.imgsList = [];
						this.getData();
					}
				} catch (err) {
					this.$request.error(err, this)
				}
			},
			//长点击
			longClick(e) {
				this.delShow = true;
			},
			//图片预览
			showImgs(e) {
				console.log(this.imgsList);
				// 预览图片
				uni.previewImage({
					current: e,
					urls: this.imgsList
				});
			}
		}
	}
</script>

<style lang="scss">
	@import 'album.scss'
</style>
